<template>
  <PageLayout>
    <template #header>
      <HeaderLayout show-back :header-style="headerStyle">
        <view>{{ navigateTitle }}</view>
      </HeaderLayout>
    </template>
    <view class="guide-video">
      <view class="title">{{ title }}</view>
      <view class="top-video" v-if="hasVideo === '1'">
        <view class="video-title">{{ $t('GuideVideo.ExclusiveVideoGuide.Title.Text') }}</view>
        <video
          class="video-box"
          id="video_play"
          :src="url"
          @error="videoErrorCallback"
          show-center-play-btn="true"
          show-play-btn="true"
          controls
        ></video>
      </view>
      <MpHtml :content="content"></MpHtml>
    </view>
  </PageLayout>
</template>
<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import HeaderLayout from '@/layout/page/header.vue'
import { onLoad } from '@dcloudio/uni-app'
import { getRichTextData } from '@/api/content'
import MpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
const headerStyle = {
  backgroundColor: '#fff',
}
const url = ref('')
const title = ref('')
const hasVideo = ref('')
const content = ref('')
const navigateTitle = ref('')

onLoad((query) => {
  url.value = query?.guideVideoUrl
  title.value = query?.title
  hasVideo.value = query?.hasVideo
  navigateTitle.value = query?.navigateTitle
  getContentFun(query?.id, query?.type)
})
async function getContentFun(id: string, type: string) {
  const res = await getRichTextData(id, type)
  content.value = res.data.content.replace(/iframe/g, 'video')
}
function videoErrorCallback() {}
</script>
<style scoped lang="less">
.guide-video {
  padding: 0 32rpx;
  font-family: 'PingFang SC';
  font-style: normal;
  background-color: #ffffff;
  .title {
    margin: 24rpx 0 48rpx;
    font-weight: 400;
    font-size: 40rpx;
    line-height: 56rpx;
    color: var(--dark-color);
  }
  .video-title {
    font-weight: 500;
    font-size: 32rpx;
    line-height: 40rpx;
    color: var(--dark-color);
    margin-bottom: 16rpx;
  }

  :deep(video) {
    width: 100%;
  }
}
</style>
